<template>
  <div class="app-container home-page">
    <PageTabs
      class="alive-tabs"
      :tabdate="tabdate"
      @tabchange="tabchange">
    </PageTabs>
    <div class="tabs-content" v-if="tabdate.activecontent === 0">
        <el-row style="height: 100%">
          <el-col :span="5" style="height: 100%">
            <div style="height: 100%">
              <div v-for="item in tagList" :key="item.value" :class="backNode == item.value ?'left-tag-selected':'left-tag'" @click="changeCss(item.value)">
                <el-row>
                  <el-col :span="3" >
                    <div :class="'transition-content' + item.value"></div>
                  </el-col>
                  <el-col :span="18" style="height: 50px;line-height: 50px">
                    <el-radio style="margin-left: -13px" v-model="radio" :label="item.value">{{item.name}}</el-radio>
                  </el-col>
                  <el-col :span="2">
                    <div style="border-radius: 100%;background-color: #F25643;color: #FFFFFF;font-size: 12px;text-align: center;line-height:16px;height: 16px;width: 16px;margin-top: 16px">
                      <span>{{item.num}}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="19" style="height: 100%">
            <div class="right-content">
              <el-row :gutter="20">
                <el-col :span="6" v-for="item in cardList" :key="item.id">
                  <div class="right-content-card" @click="toWork()">
                    <div class="card-title">
                      <span>91120116972M</span>
                    </div>
                    <img
                      class="test"
                      style="width: 100%;height: auto;user-drag: none"
                      src='@/assets/img/bench/todo_card.png'
                      alt=""
                      @mousedown="move($event,item,index)"
                      @focus="clickImg(item)"
                    />
                  </div>
                </el-col>
              </el-row>
              <div class="right-content-bottom">

              </div>
            </div>
          </el-col>
        </el-row>
    </div>
    <div class="tabs-content" style="display: flex" v-if="tabdate.activecontent === 3">
      <!--   左侧九宫格区域   -->
      <div :id="'chart' + item.id" v-for="(item,index) in echartList" style="width: 200px;height: 200px;background-color: #00afff;margin-right: 10px" @dragover="allowDrop($event)" @mouseenter="up($event, index)" @mousedown="echartsMove($event,item,index)">
        <Echarts :draggable="echartsOptions[index]?'true':'false'" ref="chartA" :echartsOptions="echartsOptions[index]" :echartsHeight="echartsOptions[index]?echartsHeightE:'0px'" />
      </div>
      <!--   右侧组件库区域   -->
      <div id="templete-bank" @dragover="allowDrop($event)" style="width: 200px;height: 100%;background-color: #7a6df0;margin-left: 200px" @mouseenter="bankUp($event)">
        <div v-for="(item,index) in imgList" class="chart-content" style="height: 30px;width: 100%;background-color: #3A71A8">
          <img
            draggable="true"
            class="test"
            style="height: 20px"
            :src="item.path"
            alt=""
            @mousedown="move($event,item,index)"
            @focus="clickImg(item)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PageTabs from '@/components/PageTabs'
import Echarts from '@/components/Echarts'

export default {
  name: 'home',
  components: {
    PageTabs,
    Echarts
  },
  data() {
    return {
      echartList: [{
        id:1,
      },{
        id:2,
      },{
        id:3,
      },],
      imgList: [{
        path: require('../assets/img/banner/head_bank_logo.png'),
        id: '0',
        type: 'type1',
        name: 'name1',
      },{
        path: require('../assets/img/banner/head_avatar.png'),
        id: '1',
        type: 'type2',
        name: 'name2',
      },{
        path: require('../assets/img/banner/user.png'),
        id: '2',
        type: 'type3',
        name: 'name3',
      },],
      imgShowList: [],
      echartsOptions1: {
        legend: {
          top: '90%',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          itemGap: 55,
          textStyle: {
            fontSize: '12',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        color: ['#398FF3', '#4CD0D1', '#00C185', '#FBD437', '#FB6D9B', '#6682F5'],
        series: [
          {
            name: '资产占比',
            type: 'pie',
            radius: ['30%', '55%'],
            data: [
              { value: 0, name: '普通客户' },
              { value: 0, name: '一星' },
              { value: 0, name: '二星' },
              { value: 0, name: '三星' },
              { value: 0, name: '四星' },
              { value: 0, name: '五星' },
            ],
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff'
            },
            label: {
              fontSize: 10,
              color: '#666',
              formatter: '{b}: {d}%',
            },
            labelLine: {
              length: 10,
              length2: 10,
            },
          },
        ],
      },
      echartsOptions2: {//客户分配
        title: {
          text: '',
          left: 'center',
          top: '90%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '40%',
          itemGap: 60,
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',

        },
        color: ['#FBD437', '#398FF3'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '已分配客户' },
              { value: 735, name: '未分配客户' },
            ],
            label: {
              fontSize: 10,
              color: '#666',
              formatter: '{d}%',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      echartsOptions3: {
        title: {
          text: '手机银行' + '\n' + '1000',//主标题文本
          subtext: '0%',//副标题文本
          left:'48%',
          top:'24%',
          textAlign: 'center',
          textStyle:{
            fontWeight: 'normal',
            fontSize: 14,
            lineHeight: 22,
            color:'#333333',
            align:'center',
            left:10
          },
          subtextStyle:{
            fontSize: 18,
            color:'#06958F',
            lineHeight: 6
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: true,
        },
        // legend: {
        //   top: 20,
        //   right:20
        // },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['55%', '70%'],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 80,
                name: "测试",
                selected: false,
                itemStyle: {
                  color: "#06958F",
                },
                // label: {
                //   normal: {
                //     // 是显示标签
                //     show: true,
                //     position: 'center',
                //     fontSize: 16,
                //     // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                //     formatter:'{d}%\n\n完成百比分',
                //   }
                // },
              },
              {
                value: 100 - 80,
                name: "",
                itemStyle: {
                  color: "#E9EEF4",
                },
                label: {
                  normal: {
                    show: false,

                  }
                }
              },
            ]
          }
        ]
      },
      echartsOptions: [{},{},{}],
      echartsHeightE: '200px',


      tabdate:{
        tabname:['待办事项','已办事项','通知与提醒','统计与分析'],
        activecontent:0
      },
      tagList: [
        {
          value: '1',
          name: '待认领商机',
          isShow: false,
          num: '0'
        },
        {
          value: '2',
          name: '待执行触达任务',
          isShow: false,
          num: '0'
        },
        {
          value: '3',
          name: '待确认产品方案',
          isShow: false,
          num: '12'
        },
        {
          value: '4',
          name: '待执行尽调任务',
          isShow: false,
          num: '0'
        },
        {
          value: '5',
          name: '待完成尽调报告',
          isShow: false,
          num: '0'
        },
        {
          value: '6',
          name: '待执行贷后任务',
          isShow: false,
          num: '0'
        },
        {
          value: '7',
          name: '待完成贷后调查报告',
          isShow: false,
          num: '0'
        },
      ],
      cardList: [
        {
          id: '0',
          name: '康希诺生物有限公司',
          code: '9112011668',
          status: 0
        },
        {
          id: '1',
          name: '康希诺生物有限公司',
          code: '9112011668',
          status: 0
        },
        {
          id: '2',
          name: '康希诺生物有限公司',
          code: '9112011668',
          status: 0
        },
        {
          id: '3',
          name: '康希诺生物有限公司',
          code: '9112011668',
          status: 0
        },
        {
          id: '4',
          name: '康希诺生物有限公司',
          code: '9112011668',
          status: 0
        },
        {
          id: '5',
          name: '康希诺生物有限公司',
          code: '9112011668',
          status: 0
        },
        {
          id: '6',
          name: '康希诺生物有限公司',
          code: '9112011668',
          status: 0
        },
        {
          id: '7',
          name: '康希诺生物有限公司',
          code: '9112011668',
          status: 0
        },
      ],
      backNode: '',
      clockContainerNode1: '',
      clockContainerNode2: '',
      clockContainerNode3: '',
      clockContainerNode4: '',
      clockContainerNode5: '',
      clockContainerNode6: '',
      clockContainerNode7: '',
      radio: '',
      isDrag: false,
      imgInfo: {},
      echartType: '',
      echartIndex: ''
    }
  },
  computed: {
    ...mapGetters({
      codeCombo: 'getCodeCombo',
      permissionList: 'getPermission',
    }),
  },
  activated() {
  },
  created() {
    console.log('用户基本信息', sessionStorage.getItem('userInfo'))
    console.log('缓存', JSON.stringify(sessionStorage.sessionObj))
    let roleType =
      sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo')).roleType
        ? JSON.parse(sessionStorage.getItem('userInfo')).roleType
        : ''
    this.isManager = roleType == '90040005'
    let orgId = sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo')).orgId
  },
  mounted() {
    this.$nextTick(() => {
      this.clockContainerNode1 = document.querySelector('.transition-content1');
      this.clockContainerNode2 = document.querySelector('.transition-content2');
      this.clockContainerNode3 = document.querySelector('.transition-content3');
      this.clockContainerNode4 = document.querySelector('.transition-content4');
      this.clockContainerNode5 = document.querySelector('.transition-content5');
      this.clockContainerNode6 = document.querySelector('.transition-content6');
      this.clockContainerNode7 = document.querySelector('.transition-content7');
    })
  },

  methods: {
    // myFunction(e) {
    //   console.log('进入该区域')
    // },
    // dragStart(event) {
    //   event.dataTransfer.setData("Text", event.target.id);
    // },
    allowDrop(event) {
      console.log('该区域内拖动')
      event.preventDefault();
    },
    tabchange(index) {
      this.tabdate.activecontent = index
    },
    changeCss(val) {
      console.log('切换radio')
      this.radio = val;
      if(this.backNode){
        switch (this.backNode)
        {
          case '1':this.clockContainerNode1.classList.add("go-left-hidden");this.clockContainerNode1.classList.remove("go-right-show");
            break;
          case '2':this.clockContainerNode2.classList.add("go-left-hidden");this.clockContainerNode2.classList.remove("go-right-show");
            break;
          case '3':this.clockContainerNode3.classList.add("go-left-hidden");this.clockContainerNode3.classList.remove("go-right-show");
            break;
          case '4':this.clockContainerNode4.classList.add("go-left-hidden");this.clockContainerNode4.classList.remove("go-right-show");
            break;
          case '5':this.clockContainerNode5.classList.add("go-left-hidden");this.clockContainerNode5.classList.remove("go-right-show");
            break;
          case '6':this.clockContainerNode6.classList.add("go-left-hidden");this.clockContainerNode6.classList.remove("go-right-show");
            break;
          case '7':this.clockContainerNode7.classList.add("go-left-hidden");this.clockContainerNode7.classList.remove("go-right-show");
            break;
        }
      }
      switch (val)
      {
        case '1':setTimeout(() => this.clockContainerNode1.classList.add("go-right-show"), 350);this.clockContainerNode1.classList.remove("go-left-hidden");
          break;
        case '2':setTimeout(() => this.clockContainerNode2.classList.add("go-right-show"), 350);this.clockContainerNode2.classList.remove("go-left-hidden");
          break;
        case '3':setTimeout(() => this.clockContainerNode3.classList.add("go-right-show"), 350);this.clockContainerNode3.classList.remove("go-left-hidden");
          break;
        case '4':setTimeout(() => this.clockContainerNode4.classList.add("go-right-show"), 350);this.clockContainerNode4.classList.remove("go-left-hidden");
          break;
        case '5':setTimeout(() => this.clockContainerNode5.classList.add("go-right-show"), 350);this.clockContainerNode5.classList.remove("go-left-hidden");
          break;
        case '6':setTimeout(() => this.clockContainerNode6.classList.add("go-right-show"), 350);this.clockContainerNode6.classList.remove("go-left-hidden");
          break;
        case '7':setTimeout(() => this.clockContainerNode7.classList.add("go-right-show"), 350);this.clockContainerNode7.classList.remove("go-left-hidden");
          break;
      }
      this.backNode = val;
      console.log('clockContainerNode', this.clockContainerNode1)
    },
    toWork() {
      this.$router.push({
        path: '/workBench/index',
      })
    },
    clickImg(info) {
      console.log('缩略图信息', info)
    },

    move(e, info, index) {
      this.isDrag = true;
      console.log('点击', e)
      console.log('缩略图信息', info)
      this.imgInfo = info
      this.echartType = info.type
      this.echartIndex = index
      document.onmousemove = function (e) {
        //获取鼠标拖拽式在页面上的位置
        let pageXs = e.pageX;
        let pageYs = e.pageY;
        console.log('鼠标拖拽事件x', pageXs)
        console.log('鼠标拖拽事件y', pageYs)
      };
      document.onmouseup = function (e) {
        let stopx = e.pageX;
        let stopy = e.pageY
        console.log('鼠标松开事件x', stopx)
        document.onmousemove = null;  //删除拖拽事件
      };


    },
    echartsMove(e,info,index) {
      console.log('左侧echarts点击', e)
      console.log('info', info)
      console.log('index', index)
    },
    up(e, i) {
      let chartContent = document.querySelector('.chart-content')
      document.onmousemove = null;
      if(this.isDrag){ //点击图片拖拽到该区域触发
        switch (this.echartType) {
          case 'type1':
            this.echartsOptions[i] = JSON.parse(JSON.stringify(this.echartsOptions1));
            break;
          case 'type2':
            this.echartsOptions[i] = JSON.parse(JSON.stringify(this.echartsOptions2));
            break;
          case 'type3':
            this.echartsOptions[i] = JSON.parse(JSON.stringify(this.echartsOptions3));
            break;
        }
        this.$forceUpdate()
        setTimeout(() => {
          this.$refs.chartA[i].initEchart();
          if(!e.path[0].tempList){
            e.path[0].tempList = [];
            e.path[0].tempList.push(this.imgInfo)
            this.imgList.splice(this.echartIndex, 1)
          } else {
            // 左侧img对象添加到imgList数组
            this.imgList.splice(this.echartIndex, 1)
            let leftImgList = e.path[0].tempList
            leftImgList.forEach(value => {
              let index = this.computeLocation(value, this.imgList)
              this.imgList.splice(index, 0, value)
            })
            e.path[0].tempList = []
            e.path[0].tempList.push(this.imgInfo)
          }
          this.$forceUpdate()
        }, 1000);
          this.isDrag = false;
        console.log('当前echart图内容',this.echartsOptions)
      }
    },
    bankUp(e) {
      console.log('右侧组件库抬起', e)
    },

    computeLocation(left, right) {
      if(left.id == 0){
        return 0
      } else {
        let temp = ''
        for(let i=0;i<right.length;i++){
          if (right[i].id > left.id){
            temp = i;
            break;
          }
        }
        return temp? temp:right.length
      }
    },

    // getHomeInfo(orgId) {
    //   let apiUrl = this.$api.main.getOrgOverViewInfo
    //
    //   this.$http.post(apiUrl, { orgId }).then(res => {
    //     if (res.data.code == 200) {
    //       let data = res.data.data
    //       let { overViewDets, pieMap } = data
    //       this.overViewDets = overViewDets
    //       this.pieMap = pieMap
    //       this.loadFlag = true
    //     }
    //   })
    // },
    // getSetInfo(orgId) {
    //   this.$http.post(this.$api.main.getOrgPositionInfo, { orgId }).then(res => {
    //     if (res.data.code == 200) {
    //       this.setInfo = res.data.data || {}
    //       this.loadSetInfo = true
    //     } else {
    //     }
    //   })
    // },
  },
}
</script>

<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: calc(100% - 0.3rem);
}
.tabs-content{
  width: 100%;
  height: calc(100vh - 167px);
  background-color: #ffffff;
  box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);
  border-radius: 6px;
  padding: 24px;
}
.left-tag-selected {
  width: 100%;
  height: 50px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px 0px 0px 6px;
  border: 1px solid #EBEFFB;
  margin-bottom: 16px;
  cursor: pointer;
}
.left-tag {
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, rgba(0,108,225,0.24) 0%, rgba(0,108,225,0.04) 100%);
  border-radius: 6px 0px 0px 6px;
  margin-bottom: 16px;
  cursor: pointer;
}
::v-deep  .el-radio__inner{
  background-color: rgba(91, 143, 219, 0.2) !important;
}
::v-deep  .el-radio__input.is-checked .el-radio__inner{
  border-color: #DCDFE6;
  background-color: #ffffff00;
}
::v-deep .el-radio__inner::after{
  width: 0px;
}
::v-deep .el-radio {
  color: #222222;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
}
::v-deep .el-radio__input.is-checked + .el-radio__label{
  color: #006CE1;
  font-weight: bold;
}
@keyframes trans-left {
  0% {
    float: right;
    left: 45px;
    width: 13px;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 9999;
  }
  50% {
    width: 25px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    left: 35px;
    z-index: 9999;
    /*margin-left: -13px;*/
  }
  100% {
    width: 0px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    left: 0px;
  }
}
@keyframes trans-right {
  0% {
    width: 0px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    left: 0px;
  }
  50% {
    width: 25px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    left: 35px;
    z-index: 9999;
    /*margin-left: -13px;*/
  }
  100% {
    float: right;
    left: 45px;
    width: 13px;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    z-index: 9999;
  }
}
.transition-content1{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content2{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content3{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content4{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content5{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content6{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.transition-content7{
  z-index: 9999;
  margin-top: 19px;
  height: 13px;
  width: 13px;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px
}
.go-right-show {
  background-color: #006CE1;
  animation: trans-right 0.4s linear;
  animation-fill-mode:forwards;
}
.go-left-hidden {
  background-color: #006CE1;
  animation: trans-left 0.4s linear;
  animation-fill-mode:forwards;
}
.right-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 0px 6px 6px 6px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(229, 241, 253, 1), rgba(229, 241, 253, 0.2)) 1 1;
  padding: 20px;
}
.right-content-card{
  position: relative;
  //min-height: 236px;
  //background: linear-gradient(180deg, #EFF6FF 0%, #DEEAFF 100%);
  //background: url('./../assets/img/bench/todo_card.png') no-repeat center center;
  //background-size: 100% 100%;
  border-radius: 6px;
  opacity: 0.6;
  margin-bottom: 20px;
}
.card-title {
  position: absolute;
  text-align: center;
  width: 70%;
  left: 15%;
  top: 50%;
  font-size: 0.8vw;
  font-family: Arial-Black, Arial;
  font-weight: 900;
  color: #003C89;
  line-height: 28px;
}
.right-content-bottom {
  height: 30%;
  width: calc(100% + 25px);
  //width: 100%;
  position: absolute;
  bottom: -25px;
  left: 0px;
  background: url('./../assets/img/bench/bottom.png') no-repeat center center;
}

</style>
